<template>
	<div class="addContainer">
		<div class="addHead">
			<div class="addLeft">
                <router-link to="/layout/service">
					<img src="../../assets/images/serviceimg/jiantou_03.png" alt="">
				</router-link>	
			</div>
			<div class="addTitle">
				<p>生活缴费</p>
			</div>
			<div class="addRight">
				<p>缴费记录</p>
			</div>
		</div>
		<div class="jiaofei">
			<div class="jfcontainer">
				<div class="top">
				<p class="p1">新增缴费</p>
				
				<p class="p2">城市</p>
				<p  class="p2">
					<img src="../../assets/images/serviceimg/ditu_03.png" alt="">
				</p>
				</div>
				<div class="bot">
				<ul>
					<li >
						<img src="../../assets/images/serviceimg/1_03.png" alt="">
						<p>水费</p>
					</li>	
					<li  >
						<img src="../../assets/images/serviceimg/icon_dianfei@2x.png" alt="">
						<p>电费</p>
					</li>
					<li >
						<img src="../../assets/images/serviceimg/icon_ranqi@2x.png" alt="">
						<p>燃气费</p>
					</li>
					<li  >
						<img src="../../assets/images/serviceimg/icon_kuandai@2x.png" alt="">
						<p>宽带</p>
					</li>
					<li >
						<img src="../../assets/images/serviceimg/icon_ranqi@2x.png" alt="">
						<p>暖气费</p>
					</li>
					<li >
						<img src="../../assets/images/serviceimg/icon_dainshi@2x.png" alt="">
						<p>有线电视</p>
					</li>	
				</ul>
				</div>
				<div class="jiaofeibot">
				<span class="s1">缴费代扣</span>|<span  class="s2">账户管理</span>|<span  class="s3">帮助中心</span>
				</div>
				</div>
		</div>
	</div>	
</template>
<script>
export default{
	name:'shenghuojiaofei',
	data(){
		return{

		}
	}
}	
</script>
<style scoped lang='less'>
.addContainer{
	overflow: hidden;
	background-color: #ffffff;
	height: 667/50rem;
}
	.addHead{
			width:100%;
			height:44/50rem;
			background:#ff5555;
			// position: fixed;
			top:0;
			left: 0;
			overflow: hidden;
			z-index: 666;
			line-height: 44/50rem;
			color:#ffffff;
			div{
				float: left;

			}
			.addLeft{
				
				margin-left: 20/2/50rem;
				margin-right: 28/2/50rem;
				img{
					width: 35/2/50rem;
					height: 30/2/50rem;
				}
			}
			.addTitle{
				margin-left: 180/2/50rem;
				margin-right: 180/2/50rem;
				p{
					font-size: 40/2/50rem;
				}
			}	
	}
	.jiaofei{
		margin-top: 20/2/50rem;
		margin-left: 25/2/50rem;
		width: 688/2/50rem;
		height: 400/2/50rem;
		box-shadow:0px 0px  10px 1px #aaa;
		.top{
			height: 100/2/50rem;
			margin-left:20/2/50rem;
			margin-right:20/2/50rem;
			.p1{
				float:left;
				padding-top: 20/2/50rem;
			}
			.p2{
				float:right;
				padding-top: 20/2/50rem;
				img{
					width:24/2/50rem;
					padding-right: 10/2/50rem;
				}
			}

		}
		ul{
			overflow: hidden;
			li{
				height: 160/2/50rem;
				width:220/2/50rem;
				float: left;
				text-align: center;
				img{
					width:40/2/50rem;
				}
				p{
					padding-top: 20/2/50rem;
				}
			}
		}
		.jiaofeibot{
			margin-left: 120/2/50rem;
			.s2{
				margin:34/2/50rem;
			}
			.s1{
				margin-right:34/2/50rem;
			}
			.s3{
				margin-left:34/2/50rem;
			}
		}
	}
</style>